<template>
  <div class="menber-company">
    <div class="menber-company-list" v-for="(item,index) in vipCompanyList" :key="index">
      <div class="menber-company-top">
        <div class="menber-company-img" @click="navigateToCompanyDetail"><img :src="item.img_url"></div>
        <div class="menber-company-content">
          <div class="menber-company-name" @click="navigateToCompanyDetail">{{item.company_name}}</div>
          <div class="menber-company-tag">
            <div class="tag" v-for="(tag,num) in item.label_list" :key="num">{{tag}}</div>
          </div>
        </div>
      </div>
      <div class="menber-company-intro">
        <span class="intro-text">简介：</span>
        <span class="intro-content">{{item.desc}}</span>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data(){
    return {
      vipCompanyList:[],
      limit: 4, //条数
      page: 1, //页码
    }
  },
  onShow(){
    this.page = 1;
    this.reqVipCompanyList("onPullDownRefresh")
  },
  //上拉加载
  onReachBottom () {
    this.page++;
    this.reqVipCompanyList();
  },
  //下拉刷新
  onPullDownRefresh () {
    this.page = 1; 
    this.reqVipCompanyList("onPullDownRefresh")
  },
  methods:{
    // 获取会员企业列表
    async reqVipCompanyList(type){
      let params = {
        limit:this.limit,
        page:this.page,
      };
      let res = await this.$api.getVipCompanyList(params);
      wx.stopPullDownRefresh()
      if(res.data.level == "success"){
        let data = res.data.data;
        if(type == 'onPullDownRefresh'){
          this.vipCompanyList = data;
        }else{
          this.vipCompanyList = this.vipCompanyList.concat(data);
        }
      }else{
        wx.showToast({
          title: '获取首页会员企业列表失败',
          icon: 'none',
          duration: 1000
        })
      }
    }, 
    //跳转到企业详情页
    navigateToCompanyDetail(){
      wx.navigateTo({
        url: '/pages/meMain/companyDetails/main'
      })
    },
  }
}
</script>

<style lang="scss" scoped>
  .menber-company{
    background-color: #f1f1f1;
    min-height: 100vh;
    .menber-company-list{
      padding: 14rpx 20rpx;
      margin-bottom: 8rpx;
      background-color: #fff;
      border-radius: 20rpx;
      .menber-company-top{
        display: flex;
        align-items: center;
        .menber-company-img{
          width: 140rpx;
          height: 140rpx;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .menber-company-content{
          margin-left:14rpx;
          .menber-company-name{
            font-size: 28rpx;
            height: 65rpx;
            line-height: 65rpx;
            color: #989898;
          }
          .menber-company-tag{
            display: flex;
            align-items: center;
            height: 65rpx;
            .tag{
              color: #6e6e6e;
              font-size: 24rpx;
              padding: 0 12rpx;
              height: 50rpx;
              line-height: 50rpx;
              border-radius: 8rpx;
              margin-right: 6rpx;
              background-color: #eaeaea;
            }
          }
        }
      }
      .menber-company-intro{
        color: #a7a7a7;
        height: 115rpx;
        font-size: 24rpx;
        padding: 8rpx 6rpx;
        line-height: 36rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
      }
    }
  }
</style>